<div style="padding:24px;">
  <p  class="page-title" routerLink="../../list">
    <i class="anticon anticon-left-circle-o"></i> <span>新建任务</span>
  </p>

  <form nz-form [formGroup]="validateForm">
    <div class="content bg-white">
      <div class="bx-form">
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务名称</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('name')" class="bx-form-item_content">
            <nz-input [nzType]="'text'" formControlName="name" [nzPlaceHolder]="'请输入任务名称'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入卡券名称!</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务类型</label>
          </div>
          <nz-radio-group formControlName="task_type" class="bx-form-item_content ml-0">
            <label nz-radio [nzValue]="1">
              <span>销售任务</span>
            </label>
            <label nz-radio [nzValue]="2">
              <span>曝光任务</span>
            </label>
          </nz-radio-group>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务商品或活动</label>
          </div>
          <div class="bx-form-item_content" nz-form-control [nzValidateStatus]="getFormControl('pick_id')">
            <div class="goods-content">
              <div class="init-content" nz-form-control [nzValidateStatus]="getFormControl('pick_id')">
                <button nz-button [nzType]="'primary'" (click)="goodsModalVisible = true">
                  <span><i class="anticon anticon-plus"></i>添加商品</span>
                </button>
              </div>

              <div class="goods-content-info">
                <div class="goods-content-photo"><img src="../../../../assets/images/banner1.jpg"></div>
                <div class="goods-content-name">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100块钱</div>
              </div>
              <div class="goods-content-detail">
                <div>
                  <div>售价￥29</div>
                </div>
                <div>
                  <div>商品库存：20000000</div>
                  <div>商品ID: 2o2313213</div>
                </div>
                <div>
                  <button nz-button [nzType]="'primary'">
                    <span>更改内容</span>
                  </button>
                </div>
              </div>

              <div class="goods-content-info">
                <div class="goods-content-photo"><img src="../../../../assets/images/banner1.jpg"></div>
                <div class="goods-content-name"><span class="activity-tips">拼团</span>巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100块钱</div>
              </div>
              <div class="goods-content-detail">
                <div>
                  <nz-popover [nzTitle]="'活动商品'">
                    <a href="javascript:;" nz-popover>查看商品</a>
                    <ng-template #nzTemplate>
                      <div class="tip-goods-item">
                        <span class="tip-goods-text" style="width: 70px;">活动商品1:</span>
                        <span class="tip-goods-text" style="width: 240px;">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100</span>
                        <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥39</span></span>
                      </div>
                      <div class="tip-goods-item">
                        <span class="tip-goods-text" style="width: 70px;">活动商品1:</span>
                        <span class="tip-goods-text" style="width: 240px;">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100</span>
                        <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥39</span></span>
                      </div>
                    </ng-template>
                  </nz-popover>
                  <div>活动有效期：2017.11.12 - 2013.23.23</div>
                </div>
                <div>
                  <div>商品ID: 2o2313213</div>
                </div>
                <div>
                  <button nz-button [nzType]="'primary'">
                    <span>更改内容</span>
                  </button>
                </div>
              </div>
            </div>


            <nz-input [nzType]="'text'" formControlName="pick_id" [nzPlaceHolder]="'请输入任务名称'" [nzSize]="'large'" hidden></nz-input>
            <div nz-form-explain *ngIf="getFormControl('pick_id').dirty&&getFormControl('pick_id').hasError('required')">请输入卡券名称!</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务有效期</label>
          </div>
          <div>
            <span nz-form-control [nzValidateStatus]="getFormControl('begin_date')" class="date-pick-box">
              <nz-datepicker
                [nzSize]="'large'"
                style="width: 100%;"
                [nzDisabledDate]="_disabledStartDate" nzShowTime
                [nzFormat]="'YYYY-MM-DD'"
                [nzPlaceHolder]="'起始时间'" formControlName="begin_date"></nz-datepicker>
              <div nz-form-explain *ngIf="getFormControl('begin_date').dirty&&getFormControl('begin_date').hasError('required')">请!</div>
            </span>
            <span nz-form-control [nzValidateStatus]="getFormControl('over_date')" class="date-pick-box">
              <nz-datepicker
                [nzSize]="'large'"
                style="width: 100%;"
                [nzDisabledDate]="_disabledEndDate" nzShowTime
                [nzFormat]="'YYYY-MM-DD'"
                [nzPlaceHolder]="'结束时间'" formControlName="over_date"></nz-datepicker>
              <div nz-form-explain *ngIf="getFormControl('over_date').dirty&&getFormControl('over_date').hasError('required')">请输入任务积分!</div>
            </span>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务积分</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('score')" class="bx-form-item_content">
            <nz-input [nzType]="'text'" formControlName="score" [nzPlaceHolder]="'请输入任务积分'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('score').dirty&&getFormControl('score').hasError('required')">请输入任务积分!</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务完成上限</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('task_number')" class="bx-form-item_content">
            <nz-input [nzType]="'text'" formControlName="task_number" [nzPlaceHolder]="'请输入任务完成上限'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('task_number').dirty&&getFormControl('task_number').hasError('required')">请输入任务完成上限!</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-control class="bx-form-item_content">
            <button nz-button [nzType]="'primary'">完成</button>
          </div>
        </div>
      </div>
    </div>

  </form>
</div>

<!-- 添加商品弹窗 start -->

<nz-modal
  [nzVisible]="goodsModalVisible"
  [nzTitle]="'添加商品或活动'"
  [nzWidth]="'700px'"
  [nzContent]="modalContent"
  (nzOnCancel)="goodsModalVisible = false;">
  <ng-template #modalContent>
    <div class="operate-line clearfix">
      <nz-radio-group [(ngModel)]="pickType" class="fl" (ngModelChange)="pickTypeChange($event)">
        <label nz-radio-button [nzValue]="'goods'">
          <span>添加商品</span>
        </label>
        <label nz-radio-button [nzValue]="'activity'">
          <span>添加活动</span>
        </label>
      </nz-radio-group>

      <nz-input
        style="width: 200px;float: right;"
        [nzType]="'search'"
        [nzPlaceHolder]="'输入任务名称'"
      ></nz-input>
    </div>
    <nz-table #nzTable *ngIf="pickType === 'goods'">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox></th>
        <th nz-th><span>商品图片</span></th>
        <th nz-th><span>商品名称</span></th>
        <th nz-th><span>商品ID</span></th>
        <th nz-th><span>商品价格</span></th>
        <th nz-th><span>商品库存</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let item of data">
        <td nz-td nzCheckbox>
          <label nz-checkbox (ngModelChange)="_refreshStatus($event)" [nzDisabled]="item.disabled" [(ngModel)]="item.checked">
          </label>
        </td>
        <td nz-td><img src="../../../../assets/images/banner1.jpg" alt=""></td>
        <td nz-td style="width: 200px">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100块钱</td>
        <td nz-td>2013012301</td>
        <td nz-td>￥39</td>
        <td nz-td>200000</td>
      </tr>
      </tbody>
    </nz-table>
    <nz-table #nzTable *ngIf="pickType === 'activity'">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox></th>
        <th nz-th><span>商品图片</span></th>
        <th nz-th><span>活动名称</span></th>
        <th nz-th><span>活动有效期</span></th>
        <th nz-th><span>活动ID</span></th>
        <th nz-th><span>活动商品</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let item of data;let i = index;">
        <td nz-td nzCheckbox>
          <label nz-checkbox (ngModelChange)="_refreshStatus($event)" [nzDisabled]="item.disabled" [(ngModel)]="item.checked">
          </label>
        </td>
        <td nz-td><img src="../../../../assets/images/banner1.jpg" alt=""></td>
        <td nz-td style="width: 200px"><span class="activity-tips">拼团</span>巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100块钱</td>
        <td nz-td>2017.11.11-2017.12.24</td>
        <td nz-td>￥39</td>
        <td nz-td>
          <nz-popover [nzTitle]="'活动商品'">
            <a href="javascript:;" nz-popover>查看商品</a>
            <ng-template #nzTemplate>
              <div class="tip-goods-item">
                <span class="tip-goods-text" style="width: 70px;">活动商品1:</span>
                <span class="tip-goods-text" style="width: 240px;">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100</span>
                <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥39</span></span>
              </div>
              <div class="tip-goods-item">
                <span class="tip-goods-text" style="width: 70px;">活动商品1:</span>
                <span class="tip-goods-text" style="width: 240px;">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100</span>
                <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥39</span></span>
              </div>
            </ng-template>
          </nz-popover>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>

<!-- 添加商品弹窗 end -->
